<template>
    <div class="">
      <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      
      <div class="logo-location" @click="$router.push('/checkaddress')">
        <van-icon name="location" style="color: red;"/>
        <span>{{ route.query.address }}</span>
      </div>
      <div class="goods-warpper">
        <van-empty
          image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          image-size="80"
          description="购物车为空, 请选购商品"
          v-if="cartStore.list.length === 0"
        />
      <van-swipe-cell v-for="item in cartStore.list" :key="item.id">
      <van-card
        :price="(item.price*item.num).toFixed(2)"
        :title="item.product"
        :desc="item.categoryname"
        style="margin-bottom:10px;background-color:#fff"
       
      >
      <template #thumb>
                  <div class="g-thumb">
                      <van-checkbox checked-color="#ee0a24" :checked="item.state" @click="cartStore.singleCheck(item.id)" width="30%"></van-checkbox>
                      <van-image :src="item.picture" width="50%"></van-image>
                  </div>
              </template>
              <template #footer>
                  <van-stepper
                      v-model="item.num"
                      button-size="22"
                      disable-input
                  />
              </template>
  </van-card>
  <template #right>
              <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                  @click="bindDelete(item.id)"
              />
          </template>
  </van-swipe-cell>
  </div>
  
  
  <!-- 提交订单栏 -->
  <van-submit-bar button-color="red" :price="cartStore.totalPrice" button-text="去结算" @submit="onSubmit">
    <van-checkbox checked-color="#ee0a24" :checked="cartStore.stateAll" @click="cartStore.checkAll">全选</van-checkbox>
  </van-submit-bar>
    </div>
  </template>
  
  <script setup lang="ts">
  import {useCartStore} from '@/stores/cart'
  import {useRouter,useRoute} from 'vue-router'
  import { Toast } from 'vant';


  
  
  
  const cartStore = useCartStore()
  const router = useRouter()
  const route = useRoute()

  // 地址信息
  
  

  
  // 提交订单跳转页面
  const onSubmit = ()=>{
    const stateStatus = cartStore.list.find(item=>item.state === true)
    if(stateStatus){
      router.push('/confirm')
    }else{
      Toast.fail('请先勾选商品!');
    }
    
  }
  
  // 返回上级
  const onClickLeft = () => {
    router.push('/home')
  }
  
  // 删除
  const bindDelete = (id:number)=>{
    cartStore.deleteGoods(id)
  }
  
  
  
  
  </script>
  
  <style scoped>
   .delete-button {
    height: 100%;
  }
  .g-thumb {
    display: flex;
  }
  .logo-location{
    text-align: center;
    margin-bottom: 10px;
  
  }
  .logo-location span{
    font-size: 12px;
  }
  .goods-warpper{
    background-color: rgb(245,245,245);
    padding-top: 10px;
  }
  .tips-logo{
    margin-top: 8px;
}

.tips{
    display: flex;
    background-color: rgb(246,208,209);
    padding: 10px;
    width: 80%;
    height: 40px;
    margin: 0 auto;
    border-radius: 10px;
}
.tips p{
    font-size:12px;
    font-weight: 600;
}
:deep(.van-card__title){
    font-weight: 900;
}
:deep(.van-card__footer){
    position: absolute;
    right: 10px;
    bottom: 10px;
}
/* :deep(.van-icon){
    margin-top: 8px;
} */
  .g-thumb {
      display: flex;
  }
  :deep(.van-card__thumb){
    width: 50%;
    margin-top: 30px;
  }
  :deep(.van-checkbox){
    margin-right: 10px;
  }
  :deep(.van-card__price){
    color: red;
    font-weight: 900;
  }
  :deep(.van-card__content){
    margin-top: 0.8rem;
  }

  .logo-location{
    text-align: center;
    margin-bottom: 10px;
  
  }
  .logo-location span{
    font-size: 12px;
  }


.location-msg{
    height: 70px;
    background-color: #fff;
    font-size: 12px;
    line-height: 25px;
    padding-left: 8px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
.location-box{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    padding-right: 5px;

}
.cart-box{
    background-color: rgb(245,245,245);
    height: 100vh;
    padding-top: 20px;
}
.myself-shop{
    display: flex;
    justify-content: space-between;
    background-color: rgb(230,212,140);
    font-size: 12px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    color: rgb(150,120,16);
    font-weight: 600;
}
:deep(.van-nav-bar__content){
    background-color:#fff;
}
:deep(.van-nav-bar__title ){
    font-weight: 900;
}
:deep(.van-nav-bar .van-icon){
    color: white;
}

  
  </style>
  